<template>
  <basic-dialog
    width="40%"
    title="批量设置系列"
    :visible="visible"
    :handleClose="handleClose"
  >
    <div class="body_wrap">
      <LabelSelect
        v-loading="brandseries.loading"
        required
        clearable
        size="mini"
        labelKey="series"
        valueKey="seriesUuid"
        label="选择系列"
        placeholder="选择系列"
        :value.sync="brandseries.value"
        :options="brandseries.options"
      />
    </div>
    <el-row slot="ft" type="flex" justify="center">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </el-row>
  </basic-dialog>
</template>

<script>
import BasicDialog from '@/components/BasicDialog';
import LabelSelect from '@/pages/commodity/components/LabelSelect';
import { getSeriesByBrandUuidService } from '@/api/public';
export default {
  components: {
    BasicDialog,
    LabelSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    brandUuid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      brandseries: {
        value: '',
        options: []
      }
    }
  },
  watch: {
    visible (val) {
      val && this.updateSeriesOptions()
    }
  },
  methods: {
    // 更新系列下拉
    async updateSeriesOptions () {
      if (!this.brandUuid) return
      const data = { brandUuid: this.brandUuid }
      const loadingFn = state => { this.brandseries.loading = state }
      const res = await getSeriesByBrandUuidService(data, loadingFn)
      this.brandseries.options = res?.retData ?? []
      if (this.brandseries.options.length == 1) { // 如果系列集合只有一个值，默认选中
        this.brandseries.value = this.brandseries.options[0].seriesUuid
      }
    },
    // 确定
    handleSubmit () {
      if (!this.brandseries.value) return this.$message.warning('系列不能为空')
      const data = {
        seriesUuid: this.brandseries.value ?? '',
        seriesInfoVos: this.brandseries.options ?? []
      }
      this.$emit('update', data)
      this.handleClose()
      this.resetSeriesState()
    },
    // 关闭弹窗
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 重置系列状态
    resetSeriesState () {
      this.brandseries.value = ''
      this.brandseries.options = []
    }
  }
}
</script>
<style lang="less" scoped>
.body_wrap {
  padding-bottom: 30px;
}
</style>
